import React, {useEffect, useState, Suspense} from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
} from '@ant-design/icons';
import {Layout, Menu, Button} from 'antd';
import style from "./HomeSystem.module.scss"
import {Outlet, useNavigate} from "react-router-dom";
import {connect} from "react-redux";
import HomeLeft from "../../component/HomeLeft/HomeLeft";
import menuLeftList from "../../router/menuLeftList";
import Crumbs from "../../component/Crumbs/Crumbs";
import MyFloatButton from "../../component/MyFloatButton/MyFloatButton";
import {useLocation} from "react-router-dom";
import {examineToken} from "../../api/user";
import {logOutSystem} from "../../store/actions/userActions";
import PageLoading from "../../component/PageLoading/PageLoading";

const {Header, Sider, Content} = Layout;

function HomeSystem(props) {
    const [collapsed, setCollapsed] = useState(false);
    const [selectedKeys, setSelectedKeys] = useState(['/HomeSystem/SystemConfig']);
    const Navigate = useNavigate()
    const Location = useLocation()
    const menuClick = (data) => {
        Navigate(data.key)
    }

    useEffect(() => {
        setSelectedKeys([Location.pathname])
    }, [Location.pathname])

    useEffect(() => {
        // 检查当前token是否过期，过期了就跳转到登录页,清空当前登录用户数据
        examineToken().then(res => {
            if (res.code !== '200') {
                Navigate('/login')
                props.logOutSystem()
            }
        })
    }, [])


    return (
        <div className={style.homeSystem}>
            <Layout>
                <Sider trigger={null} collapsible collapsed={collapsed}>
                    <Menu
                        theme="dark"
                        mode="inline"
                        onClick={menuClick}
                        selectedKeys={selectedKeys}
                        items={menuLeftList}
                    />
                </Sider>
                <Layout>
                    <Header className={style.headerStyleBody}>
                        <div className={style.headerStyle}>
                            <div className={style.headerLeft}>
                                <div>
                                    <Button
                                        type="text"
                                        icon={collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
                                        onClick={() => setCollapsed(!collapsed)}
                                        style={{
                                            fontSize: '16px',
                                            width: 64,
                                            height: 64,
                                        }}
                                    /></div>
                                <div>
                                    <Crumbs></Crumbs>
                                </div>
                            </div>
                            <div>
                                <HomeLeft></HomeLeft>
                            </div>

                        </div>
                    </Header>
                    <Content className={style.contentStyle}>
                        <Suspense fallback={<PageLoading></PageLoading>}>

                            <Outlet/>
                        </Suspense>

                    </Content>
                </Layout>
            </Layout>
            {/*悬浮按钮*/}
            <MyFloatButton></MyFloatButton>
        </div>
    );
}

const mapStoreState = (state) => {
    return {
        user: state.UserRedux.user
    }
}
const mapActionToProps = {
    logOutSystem
}
export default connect(mapStoreState, mapActionToProps)(HomeSystem);
